<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-10-22 14:59:50
 * @LastEditTime: 2023-10-22 16:38:00
 * @LastEditors: ''
-->
<template>
  <div>This is Watermark</div>
  <div class="demo-inner-divider">基本使用</div>
  <e-watermark>
    <div style="height: 500px" />
  </e-watermark>

  <div class="demo-inner-divider">多行水影</div>
  <p>使用 "content" 设置一个字符串数组来指定多行文本水印内容</p>
  <e-watermark :content="['HaloE+', 'HaloEDesign']">
    <div style="height: 500px" />
  </e-watermark>

  <div class="demo-inner-divider">图片水影</div>
  <p>
    通过 'image' 指定图像地址。
    为了确保图像清晰展示而不是被拉伸，请设置宽度和高度，建议使用至少两倍的宽度和高度的图片来保证显示效果。
  </p>
  <e-watermark
    :width="50"
    :height="50"
    image="https://picsum.photos/id/64/25"
  >
    <div style="height: 500px" />
  </e-watermark>

  <div class="demo-inner-divider"></div>
  <div class="wrapper">
    <e-watermark
      class="watermark"
      :content="config.content"
      :font="config.font"
      :z-index="config.zIndex"
      :rotate="config.rotate"
      :gap="config.gap"
      :offset="config.offset"
    >
      <div class="demo">
        <h1>示例图片</h1>
        <h2>a Vue 3 based component library for designers and developers</h2>
        <img src="https://picsum.photos/id/64/300" alt="示例图片" />
      </div>
    </e-watermark>
    <e-form
      class="form"
      :model="config"
      label-position="top"
      :label-width="50"
    >
      <e-form-item label="Content">
        <e-input v-model="config.content" />
      </e-form-item>
      <e-form-item label="Color">
        <e-color-picker v-model="config.font.color" alpha />
      </e-form-item>
      <e-form-item label="FontSize">
        <e-slider v-model="config.font.fontSize" />
      </e-form-item>
      <e-form-item label="zIndex">
        <e-slider v-model="config.zIndex" />
      </e-form-item>
      <e-form-item label="Rotate">
        <e-slider v-model="config.rotate" :min="-180" :max="180" />
      </e-form-item>
      <e-form-item label="Gap">
        <!-- <el-space> -->
        <e-input-number v-model="config.gap[0]" />
        <e-input-number v-model="config.gap[1]" />
        <!-- </el-space> -->
      </e-form-item>
      <e-form-item label="Offset">
        <!-- <el-space> -->
        <e-input-number
          v-model="config.offset[0]"
          placeholder="offsetLeft"
        />
        <e-input-number
          v-model="config.offset[1]"
          placeholder="offsetTop"
        />
        <!-- </el-space> -->
      </e-form-item>
    </e-form>
  </div>

  <WaterMarkMd class="markdown-body"></WaterMarkMd>
</template>

<script setup>
import { reactive } from 'vue'
import WaterMarkMd from "../../docs/watermark.md"
const config = reactive({
  content: 'HaloE-Design',
  font: {
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
  },
  zIndex: -1,
  rotate: -22,
  gap: [100, 100] ,
  offset: [],
})
</script>

<style scoped>
.wrapper {
  display: flex;
}
.watermark {
  display: flex;
  flex: auto;
}
.demo {
  flex: auto;
}
.form {
  width: 330px;
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 20px;
}

img {
  z-index: 10;
  width: 100%;
  max-width: 300px;
  position: relative;
}
</style>
